import React from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';

ProjectCard.propTypes = {
  project: PropTypes.shape({
    id: PropTypes.number.isRequired,
    name: PropTypes.string.isRequired,
    description: PropTypes.string,
    techStack: PropTypes.arrayOf(PropTypes.string),
    cover: PropTypes.string
  }).isRequired
};

export default function ProjectCard({ project }) {
  return (
    <Link to={`/project/${project.id}`} className="project-card">
      <div className="project-card-content">
        {project.cover && (
          <img 
            src={project.cover} 
            alt={project.name}
            className="project-cover"
          />
        )}
        <h3>{project.name}</h3>
        {project.description && <p>{project.description}</p>}
        <div className="tech-tags">
          {/* 添加空值判断 */}
          {(project.techStack || []).map((tech, index) => (
            <span key={index} className="tech-tag">
              {tech}
            </span>
          ))}
        </div>
      </div>
    </Link>
  );
}